<style lang="scss" scoped>
$LINE_HEIGHT: 36px;
$ALIGN: center;

.boy {
  width: v-bind(boyCss);
  height: $LINE_HEIGHT;
  text-align: $ALIGN;
  line-height: $LINE_HEIGHT;
  background: darkorchid;
  float: left;
}

.girl {
  width: v-bind(boyCss);
  height: $LINE_HEIGHT;
  text-align: $ALIGN;
  line-height: $LINE_HEIGHT;
  background: #7a174f;
  float: left;
}

.other {
  width: v-bind(boyCss);
  height: $LINE_HEIGHT;
  text-align: $ALIGN;
  line-height: $LINE_HEIGHT;
  background: #6c0f21;
  float: left;
}

.a {
  width: $LINE_HEIGHT+200px;
  background-color: #7c605c;
  .b {
    span {color: #fdf69a;}
  }

  .c {
    span {color: #fd6a01;}
  }

  .d {
    span {color: #464543;}
  }
}
</style>

<template>
  <div class="a">
    <div class="b">
      <span>男生人数：</span>
      <span>
        <input type="number" v-model="boy">
      </span>
    </div>
    <div class="c">
      <span>女生人数：</span>
      <span>
        <input type="number" v-model="girl">
      </span>
    </div>
    <div class="d">
      <span>其他人数：</span>
      <span>
        <input type="number" v-model="other">
      </span>
    </div>
  </div>

  <div class="boy" v-id="boy!=0">
    {{ boy }}
  </div>
  <div class="girl" v-id="girl!=0">
    {{ girl }}
  </div>
  <div class="other" v-id="other!=0">
    {{ other }}
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";

let boy = ref(0)
let girl = ref(0)
let other = ref(0)

let boyCss = computed(() => {
  return Math.round((boy.value * 1 / ((boy.value * 1) + (girl.value * 1) + (other.value * 1))) * 500) + 'px'
})
let girlCss = computed(() => {
  return Math.round((girl.value * 1 / ((boy.value * 1) + (boy.value * 1) + (other.value * 1))) * 500) + 'px'
})
let otherCss = computed(() => {
  return Math.round((other.value * 1 / ((boy.value * 1) + (boy.value * 1) + (other.value * 1))) * 500) + 'px'
})
</script>